<template>
  <div>
    <el-row>
      <el-button type="primary" @click="empAdd">添加员工</el-button>
      <el-button type="danger">批量删除</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
    </el-row>
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="empno" label="empno"/>
      <el-table-column prop="ename" label="ename"/>
      <el-table-column prop="sal" label="sal"/>
      <el-table-column prop="dName" label="deptno"/>
      <el-table-column prop="mName" label="mqr"/>
      <el-table-column prop="job" label="job"/>
      <el-table-column prop="comm" label="comm"/>
      <el-table-column prop="hiredate" label="hiredate" width="200px"/>
      <el-table-column label="操作" width="150px">
        <template slot-scope="scope">
          <el-button size="mini" @click="empEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="empDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="pageSizeChange"
      @current-change="currentChange"
      @prev-click="currentChange"
      @next-click="currentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="sizes,prev, pager, next, jumper,total"
      :total="total">
    </el-pagination>

    <!-- 下面是动态窗口 -->


    <el-dialog :title="empDialogTitle" :visible.sync="empDialogVisible" width="60%" @opened="empFormOpened">
      <el-form :model="empForm" :rules="rules" ref="empForm" label-width="100px" class="demo-empForm">
        <el-form-item label="编号" prop="empno" v-show="false">
          <el-input v-model="empForm.empno"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="ename">
          <el-input v-model="empForm.ename"></el-input>
        </el-form-item>

        <el-form-item label="工资" prop="sal">
          <el-input v-model="empForm.sal"></el-input>
        </el-form-item>

        <el-form-item label="佣金" prop="comm">
          <el-input v-model="empForm.comm"></el-input>
        </el-form-item>

        <el-form-item label="领导" prop="mqr">
          <el-input v-model="empForm.mqr"></el-input>
        </el-form-item>

        <el-form-item label="职位" prop="job">
          <el-input v-model="empForm.job"></el-input>
        </el-form-item>

        <el-form-item label="部门" prop="deptno">
          <el-select v-model="empForm.deptno" placeholder="请选择部门">
            <el-option :label="dept.dname" :value="dept.deptno" v-for="dept in deptList" :key="dept.deptno"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入职时间" required>
          <el-col :span="11">
            <el-form-item prop="hiredate">
              <el-date-picker type="date" placeholder="选择日期" v-model="empForm.hiredate"
                              style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="empDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="empFormSubmit('empForm')">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      deptList: [],//部门数据
      empDialogVisible: false,
      pageSize: 5,//默认页面显示的记录数
      pageSizes: [5, 10, 20, 50, 100, 200, 500, 1000],//可选的页面显示记录数
      total: 0,//当前表格数据库查询的总数
      currentPage: 1,//当前页号
      empForm: {
        empno: '',
        ename: 'burns',
        sal: '3',//salary
        comm: '4',//commission
        mqr: '5',
        job: '6',
        deptno: 7,
        hiredate: '2022-12-12',
        dName: '',
        mName: '',
      },
      rules: {
        ename: [
          {required: true, message: '请输入员工名称', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
      },
      empDialogTitle: '提示',
      multipleSelection: []
    }
  },
  methods: {
    empFormOpened() {
      this.getDeptList();
    },
    getDeptList() {
      let app = this;
      this.axios.request({
        url: "http://123.56.28.41:8080/api/dept/list",
        method: "get"
      }).then(({data}) => {
        console.log(data)
        app.deptList = data.data;
      })
    },
    currentChange(current) {
      this.currentPage = current;
      console.log('当前页' + this.currentPage)
      console.log('当前页显示数量' + this.pageSize)
      this.getEmpList();
    },
    pageSizeChange(pgc) {
      this.pageSize = pgc;
      console.log('当前页' + this.currentPage)
      console.log('当前页显示数量' + this.pageSize)
      this.getEmpList();
    },
    empAdd() {
      this.empDialogVisible = true;
      this.empDialogTitle = '添加员工';
      console.log(this.empForm);
      //表单初始化
      this.$refs.empForm.resetFields();
    },
    empEdit(index, row) {
      console.log(index);
      console.log(row);
      //1、根据id查询用户详细信息
      this.axios({
        url: "http://123.56.28.41:8080/api/emp/info/" + row.empno,
        method: "get"
      }).then(({data}) => {
        console.log('根据员工编号:' + row.empno + '获取的数据=>');
        console.log(data);
        //把model的值更新为编辑的数据
        this.empForm = data.data;
        this.empDialogVisible = true;
        this.empDialogTitle = '编辑员工';

      }).catch(error => {
        console.log(error);

      })


    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    empDelete(index, row) {
      console.log(row);
      //获取用户id,
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.axios({
          url: 'http://123.56.28.41:8080/api/emp/remove/' + row.empno,
          method: 'delete'
        }).then(({data}) => {
          if (data.code == 200) {
            this.$message({
              type: 'success',
              showClose: true,
              message: '删除成功'
            });
            this.getEmpList();
          } else {
            this.$message({
              type: 'error',
              showClose: true,
              message: data.msg
            });
          }

        }).error(error => {
          console.log(error);
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    getEmpList() {
      let app = this;
      //接口调用
      this.axios
        .request({
          // url: "http://localhost:8080/emp/list",
          url: "http://123.56.28.41:8080/api/emp/page",
          method: 'post',
          data: {
            current: this.currentPage,
            size: this.pageSize
          }
        })
        .then((response) => {
          console.log(response);
          //把data赋值给表格数据
          app.tableData = response.data.data.records;
          app.total = response.data.data.total;
        }).catch((error) => {
        console.log(error);
      });
    },
    empFormSubmit(empForm) {
      //校验表单
      this.$refs[empForm].validate((valid) => {
        if (valid) {
          //1、获取页面数据
          console.log('this.empForm');
          console.log(this.empForm);

          //2、携带数据发送请求
          this.axios({
            url: "http://123.56.28.41:8080/api/emp/save",
            method: "post",
            data: this.empForm
          }).then(({data}) => {
            // debugger;
            console.log(data);
            if (data.code == 200) {
              //提示用户添加成功
              this.$message({
                showClose: true,
                message: this.empForm.empno ? '更新成功' : '添加成功',
                type: 'success'
              });
              //关闭对话框
              this.empDialogVisible = false
              //刷新页面数据
              // getEmpList
              this.getEmpList();
            } else {
              //提示用户添加失败原因
              this.$message({
                showClose: true,
                message: data.msg,
                type: 'error'
              });
            }
          }).catch(error => {
            console.log(error);
          });
        } else {
          return false
        }
      })

    }
  },

  // beforeCreate() {
  //     console.log('beforeCreate');
  // },
  // created() {
  //     console.log('created');
  // },
  // beforeMount() {
  //     console.log('beforeMount');
  // },
  mounted() {
    console.log('mounted');
    this.getEmpList();
    //模拟调用后台接口获取到员工接口
    // let data = [
    //     {
    //         date: '2016-05-02',
    //         name: '王小虎',
    //         address: '上海市普陀区金沙江路 1518 弄'
    //     },
    //     {
    //         date: '2016-05-04',
    //         name: '王小虎',
    //         address: '上海市普陀区金沙江路 1517 弄'
    //     },
    //     // {
    //     //     date: '2016-05-01',
    //     //     name: '王小虎',
    //     //     address: '上海市普陀区金沙江路 1519 弄'
    //     // },
    //     // {
    //     //     date: '2016-05-03',
    //     //     name: '王小虎',
    //     //     address: '上海市普陀区金沙江路 1516 弄'
    //     // }
    // ];

  },
  // beforeUpdate() {
  //     console.log('beforeUpdate');
  // },
  // updated() {
  //     console.log('updated');
  // },
  // beforeDestroy() {
  //     console.log('beforeDestroy');
  // },
  // destroyed() {
  //     console.log('destroyed');
  // },
}
</script>


<style>

</style>
